<template>
    <lay-card>
      <lay-form :model="modelFile"  :label-position="labelPosition3" ref="layFormRef6" :rules="rules6" required>
        <lay-form-item label="行业" prop="industry">
          <lay-select v-model="modelFile.industry">
            <lay-select-option :value="item.name" :label="item.value" v-for="item in industries"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="市场" prop="market">
          <lay-select v-model="modelFile.market">
            <lay-select-option :value="item.name" :label="item.value" v-for="item in markets"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="协议" prop="protocol">
          <lay-select v-model="modelFile.protocol">
            <lay-select-option :value="item.name" :label="item.value" v-for="item in protocols"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="日期" prop="date">
          <lay-date-picker v-model="modelFile.date" placeholder=".bat文件的录制时间" allowClear></lay-date-picker>
        </lay-form-item>
        <lay-form-item label="文件">
          <lay-upload v-model="file" field="file" :auto="false" type="normal">
            <template #preview>
              {{ file[0]?.name }}
            </template>
          </lay-upload>
        </lay-form-item>
        <lay-form-item style="text-align: center;">
          <lay-button @click="cancelAction" size="sm">取消</lay-button>
          <lay-button type="normal" @click="submitCheck" size="sm">提交</lay-button>
        </lay-form-item>
      </lay-form>
    </lay-card>
</template>

<script lang="ts">
export default {
    name: "UploadFile"
}
</script>

<script lang="ts" setup>
import {onBeforeUnmount, reactive, ref} from "vue";
import {uploadFiles} from "../../api/market/basic";
import {notify} from "../../untils/tip";
import {layer} from "@layui/layui-vue";

const labelPosition3 = ref('right');

// 定义调用父组件的操作方法
const emit = defineEmits(["cancel", "load"]);

const {industries, markets, protocols} = defineProps({
  industries: {type: Array, default: ref([])},
  markets: {type: Array, default: ref([])},
  protocols: {type: Array, default: ref([])}
});

const file = ref([]);
const modelFile = reactive({
    industry: null,
    market: null,
    protocol: null,
    date: ""
});

const layFormRef6 = ref();

const rules6 = ref({
  industry : {
    type : 'string',
  },
  market : {
    type : 'string'
  },
  date : {
    type : 'date'
  },
  protocol : {
    type :  'string'
  }
});

const submitCheck = function() {
  layFormRef6.value.validate((isValidate: any, model: any, errors: any) => {
    if(isValidate){
      uploadFileAction();
    }else {
      notify("failed", errors)
    }
  });
};


const layId = ref();

// 上传文件并解压
const uploadFileAction = async () => {
  if(file.value.length === 0){
    notify("faild", "请选择文件！");
  }else {
    const fn = file.value[0].name;
    if(fn.endsWith('.rar') || fn.endsWith(".zip")){
      layId.value = layer.load(0, {time: 1000 * 60 * 10});
      console.log('modelFile:', modelFile);
      const formData = new FormData();
      formData.append('industry', modelFile.industry === null ? "" : modelFile.industry);
      formData.append('market', modelFile.market === null ? "" : modelFile.market);
      formData.append('protocol', modelFile.protocol === null ? "" : modelFile.protocol);
      formData.append('date', modelFile.date);
      formData.append('file', file.value[0]);
      console.log(formData);
      let {data, code, message} = await uploadFiles(formData);
      layer.close(layId.value);
      if (code === 200) {
        notify('success', message);
        emit("cancel");
        emit("load");
      } else {
        notify('fail', message);
      }
    }else {
      notify('fail', "仅支持上传.rar 或 .zip 的压缩包！");
    }
  }
};

const cancelAction = () => {
  emit("cancel");
};

// 销毁页面时关闭弹框
onBeforeUnmount(() => {
  layer.close(layId.value);
})
</script>